<template>
  <div>
    <h4 class="font-weight-bold py-3 mb-4">
      <span class="text-muted font-weight-light">风控工具 /</span> 预警规则
    </h4>

    <hr class="border-light container-m--x mt-0 mb-5">

    <div class="row">
      <div class="col-sm-5 col-xl-5">
        <b-card no-body header="预警规则组设置" header-tag="h6" class="mb-4">
          <b-card-body>
            <p>
              <b-btn variant="primary" size="sm">新增</b-btn>
            </p>
            <sky-table :data="table.data" :columns="table.columns" :show-index="table.showIndex" :show-pagination="false" class="mt-0"></sky-table>
            <p class="mt-3">
              <b-btn variant="primary" size="sm">新增</b-btn>
            </p>
          </b-card-body>
        </b-card>
      </div>
      <div class="col-sm-7 col-xl-7">
        <b-card header-tag="h6" class="mb-4">
          <b-form>

            <b-form-group label="预警规则名称：">
              <b-input placeholder="预警规则名称" />
            </b-form-group>
            <b-form-row>
              <b-form-group label="规则引擎：" class="col-md-6">
                <b-select value="请选择..." :options="['请选择...','法人变更']" />
              </b-form-group>
              <b-form-group label="State" class="col-md-3">
                <b-select value="请选择..." :options="['请选择...','每日','每周','每月','实时']" />
              </b-form-group>
              <b-form-group label="等级" class="col-md-3">
                <b-select value="请选择..." :options="['请选择...','高','中','低']" />
              </b-form-group>
            </b-form-row>

            <b-form-group label="计算引擎参数设置：">
              <b-textarea placeholder="Textarea" :rows="3" />
            </b-form-group>
            <b-form-group label="规则引擎说明：">
              <b-textarea placeholder="Textarea" readonly="" :rows="3" />
            </b-form-group>
            
            <b-btn variant="primary">保存</b-btn>
          </b-form>
        </b-card>
      </div>
    </div>

  </div>
</template>

<script>

export default {
    name: "riskToolAlertRuleHome",
    metaInfo: {
        title: "风控工具 - 预警规则"
    },
    components: {
    },
    data() {
        return {
            table: {
                showIndex: false,
                data: [],
                columns: [
                    {
                        title: "预警项",
                        key: "name"
                    },
                    {
                        title: "预警周期",
                        key: "cycle"
                    },
                    {
                        //<b-btn variant="outline-success borderless icon-btn" class="btn-xs" @click.prevent="edit(props.row)"><i class="ion ion-md-create"></i></b-btn>
                        title: "操作",
                        width: 220,
                        align: "center",
                        render: (h, params) => {
                            let vm = this;

                            return (
                                <div>
                                    <i-button
                                        type="info"
                                        size="small"
                                        class="mr-2"
                                        onClick={() => {
                                            return vm.edit(params);
                                        }}
                                    >
                                        <i class="ivu-icon ivu-icon-edit mr-l" />编辑
                                    </i-button>
                                    <i-button
                                        type="error"
                                        size="small"
                                        class="mr-2"
                                        onClick={() => {
                                            return vm.remove(params);
                                        }}
                                    >
                                        <i class="ivu-icon ivu-icon-ios-trash mr-1" />删除
                                    </i-button>
                                </div>
                            );
                        }
                    }
                ]
            }
        };
    },
    created() {
        // Fetch json data

        const req = new XMLHttpRequest();
        // req.open("GET", "/static/json/chainOrder-sendList-data.json");
        req.open("GET", "/static/json/riskTool/alertRule-data.json");

        req.onload = () => {
            const data = JSON.parse(req.response);

            // Add IDs for child rows functionality
            this.table.data = data;
        };

        req.send();
    },
    methods: {
        edit(row) {
            alert(`Edit: ${row.index}`);
        },
        remove(row) {
            alert(`Remove: ${row.index}`);
        },
        showSlideModal() {
            this.$refs.slideModal.show();
        },
        hideSlideModal() {
            this.$refs.slideModal.hide();
        }
    }
};
</script>
